import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

// 科目类型定义
interface KnowledgePoint {
  id: number
  title: string
  description: string
  progress: number
}

interface Subject {
  id: number
  name: string
  icon: string
  overallProgress: number
  knowledgePoints: KnowledgePoint[]
}

// 进度条颜色配置
export const progressColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

// 科目数据
export const subjects = reactive<Subject[]>([
  {
    id: 1,
    name: '英语',
    icon: 'Document',
    overallProgress: 75,
    knowledgePoints: [
      { id: 1, title: '基础语法', description: '掌握英语基本语法规则', progress: 90 },
      { id: 2, title: '词汇积累', description: '扩充词汇量，提高表达能力', progress: 80 },
      { id: 3, title: '阅读理解', description: '提升阅读速度和理解能力', progress: 70 },
      { id: 4, title: '听力训练', description: '提高英语听力水平', progress: 60 },
      { id: 5, title: '口语表达', description: '练习英语口语交流', progress: 50 }
    ]
  },
  {
    id: 2,
    name: '数学',
    icon: 'Brush',
    overallProgress: 85,
    knowledgePoints: [
      { id: 1, title: '高等数学', description: '微积分、极限、导数等基础概念', progress: 95 },
      { id: 2, title: '线性代数', description: '矩阵运算、向量空间、特征值', progress: 90 },
      { id: 3, title: '概率统计', description: '概率论基础、统计推断', progress: 80 },
      { id: 4, title: '离散数学', description: '集合论、图论、逻辑学', progress: 75 }
    ]
  },
  {
    id: 3,
    name: '前端',
    icon: 'Monitor',
    overallProgress: 90,
    knowledgePoints: [
      { id: 1, title: 'HTML/CSS', description: '网页结构和样式基础', progress: 100 },
      { id: 2, title: 'JavaScript', description: '编程语言基础和DOM操作', progress: 95 },
      { id: 3, title: 'Vue.js', description: '前端框架和组件化开发', progress: 90 },
      { id: 4, title: 'React', description: '现代前端开发框架', progress: 85 },
      { id: 5, title: 'TypeScript', description: '类型安全的JavaScript超集', progress: 80 }
    ]
  },
  {
    id: 4,
    name: '后端',
    icon: 'Setting',
    overallProgress: 70,
    knowledgePoints: [
      { id: 1, title: 'Java基础', description: '面向对象编程和基础语法', progress: 90 },
      { id: 2, title: 'Spring Boot', description: '微服务框架和依赖注入', progress: 80 },
      { id: 3, title: '数据库操作', description: 'SQL语句和ORM框架', progress: 70 },
      { id: 4, title: 'API设计', description: 'RESTful API设计和实现', progress: 60 },
      { id: 5, title: '微服务架构', description: '分布式系统设计', progress: 40 }
    ]
  },
  {
    id: 5,
    name: 'PS',
    icon: 'Edit',
    overallProgress: 65,
    knowledgePoints: [
      { id: 1, title: '基础操作', description: '界面熟悉和基本工具使用', progress: 100 },
      { id: 2, title: '图层管理', description: '图层概念和混合模式', progress: 85 },
      { id: 3, title: '选区工具', description: '各种选区工具的使用技巧', progress: 75 },
      { id: 4, title: '图像调整', description: '色彩校正和图像优化', progress: 60 },
      { id: 5, title: '特效制作', description: '滤镜和特效应用', progress: 45 }
    ]
  },
  {
    id: 6,
    name: 'PR',
    icon: 'VideoPlay',
    overallProgress: 55,
    knowledgePoints: [
      { id: 1, title: '界面熟悉', description: 'Premiere界面和基本操作', progress: 90 },
      { id: 2, title: '素材导入', description: '视频、音频素材的导入和管理', progress: 80 },
      { id: 3, title: '剪辑技巧', description: '视频剪辑和转场效果', progress: 65 },
      { id: 4, title: '音频处理', description: '音频编辑和音效添加', progress: 50 },
      { id: 5, title: '特效制作', description: '视频特效和动画制作', progress: 35 }
    ]
  },
  {
    id: 7,
    name: '数据库',
    icon: 'Files',
    overallProgress: 80,
    knowledgePoints: [
      { id: 1, title: 'SQL基础', description: '数据库查询语言基础', progress: 95 },
      { id: 2, title: 'MySQL', description: '关系型数据库管理系统', progress: 90 },
      { id: 3, title: '索引优化', description: '数据库性能优化技巧', progress: 80 },
      { id: 4, title: '事务管理', description: 'ACID特性和事务处理', progress: 70 },
      { id: 5, title: 'NoSQL', description: '非关系型数据库应用', progress: 65 }
    ]
  },
  {
    id: 8,
    name: '计算机网络',
    icon: 'Connection',
    overallProgress: 75,
    knowledgePoints: [
      { id: 1, title: '网络基础', description: 'OSI七层模型和TCP/IP协议', progress: 90 },
      { id: 2, title: '路由交换', description: '路由器配置和网络拓扑', progress: 80 },
      { id: 3, title: '网络安全', description: '防火墙和VPN技术', progress: 70 },
      { id: 4, title: '网络协议', description: 'HTTP、HTTPS、FTP等协议', progress: 65 },
      { id: 5, title: '网络编程', description: 'Socket编程和网络应用开发', progress: 55 }
    ]
  },
  {
    id: 9,
    name: '网络安全',
    icon: 'Lock',
    overallProgress: 60,
    knowledgePoints: [
      { id: 1, title: '安全基础', description: '网络安全基本概念和威胁', progress: 85 },
      { id: 2, title: '密码学', description: '加密算法和数字签名', progress: 70 },
      { id: 3, title: '渗透测试', description: '漏洞扫描和渗透测试技术', progress: 55 },
      { id: 4, title: '安全防护', description: '入侵检测和防护系统', progress: 45 },
      { id: 5, title: '应急响应', description: '安全事件处理和恢复', progress: 35 }
    ]
  }
])

// 选中的科目
export const selectedSubject = ref<Subject | null>(null)

// 路由实例
const router = useRouter()

// 返回上一页
export const handleBack = () => {
  try {
    console.log('返回按钮被点击')
    if (router) {
      router.back()
    } else {
      console.error('路由实例未找到')
      // 备用方案：直接跳转到首页
      window.location.href = '/my-class'
    }
  } catch (error) {
    console.error('返回按钮点击出错:', error)
    // 备用方案：直接跳转到首页
    window.location.href = '/my-class'
  }
}

// 选择科目
export const selectSubject = (subject: Subject) => {
  selectedSubject.value = subject
}

// 获取节点样式类
export const getNodeClass = (progress: number): string => {
  if (progress >= 80) return 'completed'
  if (progress >= 60) return 'in-progress'
  if (progress >= 40) return 'started'
  return 'not-started'
}

// 获取进度条颜色
export const getProgressColor = (progress: number): string => {
  if (progress >= 80) return '#67c23a'
  if (progress >= 60) return '#409eff'
  if (progress >= 40) return '#e6a23c'
  return '#f56c6c'
}

// 获取连接线样式类
export const getConnectionClass = (currentProgress: number, nextProgress: number): string => {
  if (currentProgress >= 80 && nextProgress >= 40) return 'completed'
  if (currentProgress >= 60) return 'in-progress'
  return 'not-started'
} 